<script setup>
import FolderCard from '@/components/FolderCard.vue'
import VideoCard from '@/components/VideoCard.vue'
import { inject, ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router';
import axios from 'axios';
import { getApiUrl } from '@/config/urlconfig';

// 从App.vue中获取深色模式状态和切换函数
const { isDarkMode } = inject('darkMode', { isDarkMode: false })
const route = useRoute();

const displayFolders = ref([]);
const displayVideos = ref([]);

const fetchFoldersAndVideos = async () => {
  try {
    const folder = route.query.category ? decodeURIComponent(route.query.category) : '';
    
    // 如果没有category参数，默认使用get-all-videos接口
    const apiEndpoint = !route.query.category
      ? getApiUrl('api/get-all-videos')
      : getApiUrl('api/get-folders-videos');
    
    const response = await axios.get(apiEndpoint, 
      route.query.category ? { params: { folder } } : {}
    );
    
    if (response.data.status === 'success') {
      // 将后端返回的数据转换为前端需要的格式
      const currentCategory = route.query.category ? decodeURIComponent(route.query.category) : '';
      displayFolders.value = response.data.folders.map((folder, index) => ({
        id: index + 1,
        title: folder.parent_folder ? `${folder.parent_folder}/${folder.folder_name}` : (currentCategory ? `${currentCategory}/${folder.folder_name}` : folder.folder_name),
        videoCount: folder.videoCount,
        parent_folder: folder.parent_folder
      }));
      
      displayVideos.value = response.data.videos.map((video, index) => ({
        id: index + 1,
        title: video.video_name,
        thumbnail: video.thumbnail,
        views: video.views,
        duration: video.duration
      }));
    }
  } catch (error) {
    console.error('获取文件夹和视频数据失败:', error);
    displayFolders.value = [];
    displayVideos.value = [];
  }
};

// 监听路由参数变化
watch(() => route.query.category, () => {
  fetchFoldersAndVideos();
});

onMounted(() => {
  fetchFoldersAndVideos();
});
</script>

<template>
    <main class="main-content">
      <div class="header">
      </div>
      <div class="folder-grid">
        <FolderCard
          v-for="folder in displayFolders"
          :key="folder.id"
          :title="folder.title"
          :videoCount="folder.videoCount"
        />
        <VideoCard
          v-for="video in displayVideos"
          :key="video.id"
          :title="video.title"
          :thumbnail="video.thumbnail"
          :views="video.views"
          :duration="video.duration"
        />
      </div>
  </main>
</template>

<style scoped>
.main-content{
  padding: 0 2rem;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 80px; /* 为固定导航栏留出空间 */
  width: 100%;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2rem;
  padding: 2rem;
  max-width: 1600px;
  margin: 0 auto;
  padding-top: 80px;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 0 1rem;
}

.page-title {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2rem;
  padding: 1rem;
}

@media (max-width: 1024px) {
  .folder-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .folder-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.25rem;
    padding: 0.75rem;
  }
  
  .main-content {
    padding: 1rem;
    padding-top: 70px;
  }
}

@media (max-width: 480px) {
  .folder-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 0.5rem;
  }
  
  .main-content {
    padding: 0.75rem;
    padding-top: 60px;
  }
  
  .page-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 640px) {
  .folder-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
